<template>
    <view
        style="width: 750rpx; position: fixed; z-index: 100"
        :style="{
            height: systemInfo.statusBarHeight + 'px',
            background: `rgba(35,226,166,${opacityNum})`,
        }"
    ></view>
    <view
        class="title_main"
        :style="{
            background: `rgba(35,226,166,${opacityNum})`,
            top: systemInfo.statusBarHeight + 'px',
        }"
        :class="{ addTitle: opacityNum > 0 }"
    >
        <image src="/static/image/back.png" class="back" @tap="goBack"></image>
        <text class="title_name">群详情</text>
		<view class="d-flex a-center" style="gap: 10rpx">
			<!--
            <i
                v-show="!isFav"
                @tap="toggleFav"
                class="aixin icon icon-a-aixin2"
            ></i>
            <i
                v-show="isFav"
                @tap="toggleFav"
                class="aixin icon icon-aixin"
                style="color: #23e2a6"
            ></i>
			-->
            <!-- <image src="/static/image/shere.png" class="shere"></image> -->
        </view>
    </view>

    <view class="top_bg">
        <view class="shadow"></view>
        <view class="shadow1"></view>
        <cacheimg
            class="img"
            :style="{ transform: `scale(${scale})` }"
            :saveKey="groupDetail.groupId"
            :src="groupDetail.photo"
            mode="aspectFill"
        ></cacheimg>
    </view>
    <!-- :style="{ marginTop: `${systemInfo.statusBarHeight}px` }" -->
    <view class="content1">
        <view class="title1 d-flex a-center" style="margin-top: 250rpx">
            <text style="margin-right: 10rpx">{{ groupDetail.name }}</text>
            <!-- <i v-for="i in 5" class="icon icon-a-huomiao2x"></i> -->
        </view>

        <view class="msg1 d-flex j-between">
            <view class="box1 d-flex a-center">
				<!--
                <image class="pos" src="/static/image/pos.png" mode="" />
                <text class="text"
                    >{{ groupDetail.groupUserCity }}·{{
                        groupDetail.distance
                    }}</text
                >
				-->
                <text class="text" style="margin-left: 30rpx"
                    >ID：{{ groupDetail.groupId }}</text
                >
            </view>
			<!--
            <text class="goHistory d-flex a-center" @tap="goHistory">
                群历史
                <image class="img" src="/static/image/lishi.png"></image>
            </text>
			-->
        </view>

        <view class="touxiang_img d-flex a-center j-between">
            <view class="left_tou d-flex">
				<userhead
					style="margin-left: -20rpx;"
					v-for="(tou, index) in groupUsers"
				    width="88"
				    height="88"
					:key="tou.userId"
				    :saveKey="tou.userId"
				    :src="tou.userPhoto || '/static/head.jpg'"
				/>
				<!--
                <view
                    class="image_box d-flex a-center j-center"
                    v-for="(tou, index) in groupUsers"
                    @tap="goPangyouDetail(tou.userId)"
                >
                    <cacheimg
                        class="image"
                        :key="tou.userId"
                        :saveKey="tou.userId"
                        :src="tou.userPhoto || '/static/head.jpg'"
                    ></cacheimg>
                </view>
				-->
                <text class="shenlue" v-show="groupDetail.currentUserCount > 7"
                    >...</text
                >
            </view>
            <view
                class="right_jiantou d-flex a-center j-between"
                @tap="goMembersDetail"
            >
                <view class="d-flex a-center j-between">
                    共<text class="num">{{ groupDetail.currentUserCount }}</text
                    >位群友
                </view>
                <image
                    src="/static/image/shuangjian.png"
                    class="shuangjian"
                ></image>
            </view>
        </view>

        <view class="owner d-flex a-center" @tap="goUserDetail">
            <cacheimg
                :saveKey="groupDetail.userId"
                :src="groupDetail.groupUserPhoto || '/static/head.jpg'"
                class="owner_head"
            ></cacheimg>
            <view class="rightBox d-flex d-c j-between">
                <view class="title d-flex a-center d-flex a-center">
                    <view
                        v-if="groupDetail.isRealName"
                        class="tag d-flex a-center j-center"
                        :class="{ isRealName: groupDetail.isRealName }"
                    >
                        {{ groupDetail.isRealName ? "已实名" : "未实名" }}
                    </view>
                    <view class="text" style="margin-left: 10rpx">{{
                        groupDetail.nickName
                    }}</view>
                </view>

                <view class="msg_box d-flex">
					<!--
                    <view class="box d-flex d-c">
                        <view class="dot time d-flex a-center">
                            <text class="num d-flex a-center j-center">{{
                                fromNow(groupDetail.createTime)
                            }}</text>
                            天
                        </view>
                        <view class="text"> 来轻盈 </view>
                    </view>
					-->
                    <view class="box d-flex d-c a-center">
                        <view class="dot people d-flex a-center">
                            <text class="num d-flex a-center j-center">{{
                                groupDetail.leadCount
                            }}</text>
                            人
                            <i class="icon icon-xiaosanjiao sanjiao"></i>
                        </view>
                        <view class="text"> 累计带领 </view>
                    </view>
                    <view class="box d-flex d-c a-center" @tap.stop="goRate">
                        <view class="dot pj d-flex a-center">
                            <text class="num d-flex a-center j-center">{{
                                groupDetail.appraiseCount
                            }}</text>
                            条
                            <i class="icon icon-xiaosanjiao sanjiao"></i>
                        </view>
                        <view class="text"> 评价 </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="box2">
            <view class="title2 d-flex a-center">
                <view class="dot"></view>
                群主服务
            </view>

            <view class="jiaobiao" :class="[shadowClass]">
                <i class="icon" :class="[getClass]"></i>
                <!-- <view class="bg" :class="[shadowClass(circle)]"></view> -->
                <text class="text">{{ jiaobiaoText }}</text>
            </view>

            <view class="service d-flex wrap" style="margin-top: 20rpx">
                <view
                    class="card d-flex d-c j-center a-center checked"
                    v-for="(item, index) in groupDetail.userGroupItemss"
                    @tap="selectService(item)"
                >
                    <view
                        class="rect d-flex a-center j-center"
                        :class="{
                            newService: !baseService.includes(item.photo),
                        }"
                    >
                        <image
                            class="img"
                            :src="`/static/createCircle/${item.photo}-w.png`"
                        ></image>
                    </view>
                    <view
                        :class="{
                            newServiceText: !baseService.includes(item.photo),
                        }"
                        class="text psr"
                    >
                        {{ item.title }}
                    </view>
                </view>
            </view>

            <view class="title2 d-flex a-center" style="margin-top: 20rpx">
                <view class="dot"></view>
                群主说
            </view>

            <view class="rich_box">
                <rich-text :nodes="groupDetail.introduction2"></rich-text>
            </view>
        </view>

        <view class="jubao">
            <view class="jubao-text" @click="onLinkcomplaint">举报</view>
        </view>

        <view class="bottomView"></view>
    </view>

    <view class="detail-tar">
        <view class="d-flex a-center j-center" style="gap:20rpx;">
            <view class="bar-lianxi" @tap="contactQuanzhu">
                <view>
                    <image
                        src="/static/image/lianxi.png"
                        class="lianxi"
                    ></image>
                </view>
                <view class="tar-quan">联系群主</view>
            </view>
            <view class="bar-btn">
                <view
                    class="btn_main_r"
                    v-if="inGroup && !isVisitor"
                    style="width: 565rpx; height: 100rpx"
                    @tap="goQuanzi"
                >
                    <text class="text" style="font-weight: bold">进入群</text>
                </view>

                <view
                    class="btnGroup d-flex a-center j-center"
                    v-if="isVisitor || !inGroup"
                >
					<!--
                    <view
                        class="btn_l d-flex a-center j-center"
                        :class="{ needPay: groupDetail.payAmount }"
                        @tap="handleVistorJoin"
                    >
                        <text>游客进入</text>
                    </view>
					-->
                    <view
                        class="btn_main_r d-flex d-c a-center j-center"
						style="width: 565rpx; height: 100rpx"
                        :class="{ needPay: groupDetail.payAmount }"
                        @tap="goApplyforGroup"
                    >
						<!--
                        <view class="text" v-if="!VER.ver">
                            {{
                                groupDetail.payAmount
                                    ? `¥${toYuan(groupDetail.payAmount)}`
                                    : "免费"
                            }}
                        </view>
						-->
                        <view class="add-text2" v-if="!VER.ver"> 加入群 </view>
                        <view class="add-text1" style="font-size:34rpx;font-weight:400;color:#fff;"  v-if="VER.ver"> 加入群 </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="heightBox"></view>
    </view>

    <tm-overlay
        v-model:show="dialogVisible"
        contentAnimation
        style="border-radius: 20rpx"
    >
        <view @top.stop="" class="sheet">
            <tm-sheet
                :width="540"
                style="border-radius: 20rpx; padding: 0"
                @tap="dialogVisible = false"
            >
                <view class="dialog_box">
                    <view class="title">
                        {{ currentService.title }}
                    </view>
                    <scroll-view :scroll-y="true" class="desp">
                        <rich-text :nodes="currentService.detail"></rich-text>
                    </scroll-view>
                </view>
            </tm-sheet>
        </view>
    </tm-overlay>

    <!-- @maskClick="fix=false" -->

    <uni-popup v-if="!VER.ver" style="z-index:200" ref="popup" :safe-area="false" :mask-click="true" @maskClick="maskClick">
			<view class="bottom-popup">
				<view class="popup-title psr d-flex a-center j-center">
					<view class="title-text">选择支付方式</view>
					<image @tap="close" class="title-icon psa h-center" src="/static/image/close.png"></image>
				</view>
				<template v-for="item in systemConfig.payType">
					<view class="popup-row" @tap="selectPay(item)">
						<view class="row-content d-flex a-center" :class="{selected:selectedPayType.slimKey===item.slimKey}">
							<image v-if="selectedPayType.slimKey===item.slimKey" class="selected-icon" src="/static/image/payment-selected.png"></image>
							<image v-if="item.slimKey==1" class="content-img" src="/static/image/WeChat.png"></image>
							<image v-if="item.slimKey==2" class="content-img" src="/static/image/Alipay.png"></image>
							<view class="content-type">
								<view class="type-name d-flex a-center">
									<view class="name-text">{{item.slimValue}}</view>
								</view>
							</view>
						</view>
					</view>
				</template>

                <view class="d-flex j-center" style="width:100%;font-size:26rpx;color:#999;margin-top:30rpx;">48小时退群可全额退款</view>
				<view class="popup-button">
                    
                    <view class="btn_main_r" style="margin:0 auto;"  @tap="checkAndPayAmount">
                        <text class="text">
                            支付 ¥{{toYuan(groupDetail.payAmount)}}
                        </text>
                    </view>

                    <view class="heightBox"></view>

				</view>
			</view>
		</uni-popup>

    <uni-popup
        ref="servicePopup"
        :safe-area="false"
        type="bottom"
        background-color="transpartent"
    >
        <view class="servicePopup" :class="{ newService: showServiceisNew }">
            <view class="shadow"></view>
            <view class="shadow1"></view>
            <view class="content">
                <view class="title d-flex a-center j-center">
                    <view class="text">{{ currentShowService.title }}</view>
                    <view
                        class="close psa h-center"
                        @tap="servicePopup.close()"
                    >
                        <image
                            class="img"
                            src="/static/image/close.png"
                            mode=""
                        />
                    </view>
                </view>
                <view
                    class="row1 d-flex"
                    v-for="(item, index) in currentShowService.detailArr"
                >
                    <view class="index d-flex a-center j-center">{{
                        index + 1
                    }}</view>
                    <view class="text">{{ item }}</view>
                </view>

                <view class="heightBox"></view>
            </view>
        </view>
    </uni-popup>

    <web-view
        :style="{ width: `1rpx`, height: `1rpx` }"
        :webview-styles="webviewStyles"
        src="/hybrid/html/ali.html"
    ></web-view>

</template> 
<script setup lang="ts">
import { ref, computed } from "vue";
import { removeFav, addFav } from "@/api/api";
import { centToYuan } from "@/utils/format";
import { pay } from "@/hooks/pay";
import { pay as h5pay } from "@/hooks/h5pay";
import {
    onReady,
    onShow,
    onLoad,
    onUnload,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import {
    getCircleDetail,
    vistorJoin,
    groupIsFavorit,
    isInGroupBlacklist,
    checkGroupUserCount,
} from "@/api/api";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import {
    handleJoinGroup,
    isGroupJoined,
    getGroupProfile,
    handleJumpToChat,
    checkFriend,
} from "@/hooks/imHooks";
import { userData as userDataStore } from "@/store/userData";
import { showLoading, closeLoading } from "@/utils/utils";
import cacheimg from "@/components/cacheimg.vue";
import { ver } from "@/store/ver";
import userhead from "@/components/userhead.vue";


const VER = ver();
const webviewStyles = ref({
    width:'1',
    height:'1'
})
const groupUsers = computed(()=>{
    if(!groupDetail.value){
        return []
    }
    const arr = groupDetail.value.groupUsers||[];
    if(arr.length >=6){
        return arr.slice(0,6)
    }
    return arr;
})
// import { imStore } from "@/store/imStore";
// import moment from 'moment'
const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();
const systemConfig: any = systemConfigStore();
const baseService: any = ref(["10000", "10001", "10002", "10003"]);

const jiaobiaoText = computed(() => {
    let str = "";
    systemConfig.groupTag.forEach((item:any) => {
        if (item.slimKey === groupDetail.value.label) {
            str = item.slimValue;
        }
    });

    return str;
});

const IsInGroupBlacklist = async () => {
    const params = {
        userId: userData.id,
        groupId: groupId.value,
    };
    const res:any = await isInGroupBlacklist(params);

    const { flag, data } = res;
    if (flag !== 1) {
        return false;
    }
    return data.data;
};

const getClass = computed(() => {
    if (groupDetail.value.label == 1) {
        return "icon-jianzhongshoushen";
    }
    if (groupDetail.value.label == 2) {
        return "icon-jianzhizengji";
    }
    if (groupDetail.value.label == 3) {
        return "icon-yundongjiankang";
    }
    if (groupDetail.value.label == 4) {
        return "icon-jiankangyinshi";
    }
    if (groupDetail.value.label == 5) {
        return "icon-xiuxianyangsheng";
    }
});

const shadowClass = computed(() => {
    if (!groupDetail.value) {
        return "";
    }

    if (!groupDetail.value.label) {
        return "";
    }

    if (!groupDetail.value.label) {
        return "";
    }

    if (!systemConfig.groupTag) {
        return "";
    }

    if (!systemConfig.groupTag.length) {
        return "";
    }

    if (groupDetail.value.label === systemConfig.groupTag[0].slimKey) {
        return "shadow0";
    }

    if (groupDetail.value.label === systemConfig.groupTag[1].slimKey) {
        return "shadow1";
    }

    if (groupDetail.value.label === systemConfig.groupTag[2].slimKey) {
        return "shadow2";
    }

    if (groupDetail.value.label === systemConfig.groupTag[3].slimKey) {
        return "shadow3";
    }

    if (groupDetail.value.label === systemConfig.groupTag[4].slimKey) {
        return "shadow4";
    }
});

const toYuan = (num: number) => {
    return Number(centToYuan(num));
};

const currentShowService: any = ref({});
const servicePopup = ref();
const showServiceisNew = computed(() => {
    return !baseService.value.includes(currentShowService.value.photo);
});

const scale = ref(1);

// const onScroll = (e: any) => {

//     if (e.detail.scrollTop >= 0) {
//         // 导航条颜色透明渐变
//         if (e.detail.scrollTop <= 20) {
//             opacityNum.value = 0;
//         } else if (20 < e.detail.scrollTop && e.detail.scrollTop <= 100) {
//             opacityNum.value = e.detail.scrollTop / 100;
//         } else if (e.detail.scrollTop > 100) {
//             opacityNum.value = 1;
//         }
//     }

//     if (e.detail.scrollTop < 0) {
//         scale.value = 1 - e.detail.scrollTop / 150;
//     } else {
//         scale.value = 1;
//     }
// };

const selectService = (service:any) => {
    const arr = service.detail.split("&*&*&");
    currentShowService.value = service;
    currentShowService.value.detailArr = arr;
    servicePopup.value.open();
};

const dialogVisible = ref(false);
const currentService:any = ref({});
/*
const showService = (service: any) => {
    service.detail = service.detail.replace(/\n/g, " <br/>");
    currentService.value = service;
    dialogVisible.value = true;
};
*/

//onst IM_STORE = imStore();
const opacityNum: any = ref(0); //响应式
onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if (scrollTop >= 0) {
        // 导航条颜色透明渐变
        if (scrollTop <= 20) {
            opacityNum.value = 0;
        } else if (20 < scrollTop && scrollTop <= 100) {
            opacityNum.value = scrollTop / 100;
        } else if (scrollTop > 100) {
            opacityNum.value = 1;
        }
    }

    if (scrollTop < 0) {
        scale.value = 1 - scrollTop / 200;
    } else {
        scale.value = 1;
    }

    servicePopup.value.close();
});

//收藏

const goBack = () => {
    uni.navigateBack();
};

const groupId: any = ref();

const groupDetail:any = ref({});
/*
const getTag = (id:string) => {
    let str = "";
    systemConfig.groupTag.forEach((item:any) => {
        if (item.slimKey === id) {
            str = item.slimValue;
        }
    });
    return str;
};
*/

const goRate = () => {
    uni.navigateTo({
        url: `/pages/rate/rate?userId=${groupDetail.value.userId}`,
    });
};
/*
const fromNow = (time: string) => {
    let now = new Date().getTime();
    let createTime = new Date(time).getTime();
    let subTime = now - createTime;
    return Math.ceil(subTime / 86400000);
};
*/
const getDetail = async (groupId: string) => {
    const res: any = await getCircleDetail({ groupId });
    const { flag, data } = res;
    console.log("getDetail");
    console.log(data);
    console.log(systemConfig.groupTag);
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群详情失败",
            duration: 3000,
        });

        return;
    }
    data.introduction = data.introduction.replace(/\n/g, " <br/>");
    data.introduction2 = data.introduction2.replace(/\n/g, "<br/>");

    groupDetail.value = data;
};

const isVisitor = ref(false);
const GetGroupProfile = async () => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            return GetGroupProfile();
        }, 200);
        return;
    }
    const res:any = await getGroupProfile(groupId.value);
    // console.log('GetGroupProfile')
    // console.log(res)
    let flag = false;

    const { memberCustomField } = res.data.group.selfInfo;
    if (memberCustomField.length) {
        memberCustomField.forEach((item:any) => {
            if (item.key === "role" && item.value === "Tourist") {
                flag = true;
            }
        });
    }

    isVisitor.value = flag;
};

const joinGroupLoading = ref(false);

const inGroup = ref(false);

const handleisGroupJoined = async () => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            handleisGroupJoined();
        }, 20);
        return;
    }
    inGroup.value = await isGroupJoined(userData.id, groupId.value) as boolean;
};

let isChecking = false;
let closeChecking = false;

const checkJoinedAndGoGroup = async () => {

    if(isChecking) {
        return;
    }

    if(closeChecking){
        return;
    }
    isChecking = true;
    if (checkStartTime) {
        let now = new Date().getTime();
        let timeDiff = now - checkStartTime;

        if (timeDiff > 300 * 1000) {
            isChecking = false;
            return;
        }
    }

    // const pages = getCurrentPages();
    // const page = pages[pages.length - 1];
    // const currentWebview = page.$getAppWebview();

    const isJoined: boolean = await isGroupJoined(
        userData.id,
        groupId.value
    ).catch(() => {}) as boolean;

    inGroup.value = isJoined;

    if (!isJoined) {
        setTimeout(() => {
            checkJoinedAndGoGroup();
        }, 1000);
        return;
    }
    await GetGroupProfile();


    if (isVisitor.value) {
        setTimeout(() => {
            checkJoinedAndGoGroup();
        }, 1000);
        return;
    }

    closeLoading();
    uni.showToast({
        icon: "none",
        title: "已加入群",
        duration: 5000,
    });

    close();

    // setTimeout(()=>{
    //     uni.showToast({
    //             icon: "none",
    //             title: "webview close",
    //             duration: 5000,
    //         });
    //     currentWebview.close();
    // },500)


    goQuanzi();


    //goChat(true);

    // /* #ifdef H5 */
    // uni.navigateTo({
    //     url: "/pages/quanzi/quanzi",
    // });
    // /*#endif*/

    // /*#ifdef APP-PLUS*/
    // uni.switchTab({
    //     url: "/pages/quanzi/quanzi",
    // });
    // /*#endif*/
};

const selectedPayType:any = ref({});

const selectPay = (item:any) => {
    selectedPayType.value = item;
};

let checkStartTime:any = null;

let payLoading = false;

const checkAndPayAmount = async () => {
    const item = selectedPayType.value;

    if (!item.slimKey) {
        uni.showToast({
            icon: "none",
            title: "请选择支付方式",
            duration: 1500,
        });

        return;
    }

    if (!groupDetail.value.payAmount) {
        return true;
    }

    if(payLoading){
        return;
    }


    payLoading = true;

    uni.showLoading();

    const payParams = {
        slimType: 2,
        totalAmt: groupDetail.value.payAmount,
        productId: groupDetail.value.groupId,
        payType: Number(item.slimKey),
    };

    let res = null;

    if (uni.platform === "ios") {
        if(payParams.payType===1){
            uni.showToast({
                icon: "none",
                title: "暂不支持微信支付",
                duration: 1500,
            });
            payLoading = false;
            return;

        }
        res = await h5pay(payParams).catch(() => {
            uni.showToast({
                icon: "none",
                title: "支付失败",
                duration: 1500,
            });
            payLoading =false;
        });
    } else {


        res = await pay(payParams).catch(() => {
            // uni.showToast({
            //     icon: "none",
            //     title: "支付失败",
            //     duration: 1500,
            // });
            payLoading = false;
        });

        if(!res){
            return;
        }
    }
    checkStartTime = new Date().getTime();
    uni.$emit("groupJoined");

    checkJoinedAndGoGroup();

};
/*
const joinGroup = async () => {
    if (joinGroupLoading.value) {
        return;
    }

    showLoading();

    joinGroupLoading.value = true;

    const isJoined: boolean = await isGroupJoined(
        userData.id,
        groupId.value
    ).catch(() => {
        closeLoading();
    });

    if (isJoined && !isVisitor.value) {
        closeLoading();
        uni.showToast({
            icon: "none",
            title: "您已经在这个群~",
            duration: 1500,
        });
        joinGroupLoading.value = false;
        handleJumpToChat(`GROUP${groupId.value}`);
        return;
    }

    const msg = `你好，我是${userData.nickName}*&*&*discoverDetail`;

    if (groupDetail.value.payAmount) {
        closeLoading();
        open();
        return;
    }

    //const checkAmount = await checkAndPayAmount()

    const result: any = await handleJoinGroup({
        groupID: groupId.value,
        msg,
    }).catch(() => {
        closeLoading();
    });

    console.log(result);
    const {
        code,
        data: { status },
    } = result;
    joinGroupLoading.value = false;

    closeLoading();
    if (status === "WaitAdminApproval") {
        uni.showToast({
            icon: "none",
            title: "已向群主发起申请，请耐心等待群主审核~",
            duration: 1500,
        });
        return;
    }

    if (status === "JoinedSuccess") {
        uni.showToast({
            icon: "none",
            title: "已加入群",
            duration: 1500,
        });
        //uni.navigateTo({
            url: "/pages/quanzi/quanzi",
        });

        uni.switchTab({
            url: "/pages/quanzi/quanzi",
        });
    }
};
*/

let jumpLoading = false;

const goQuanzi = async () => {
    if(jumpLoading){
        return;
    }

    jumpLoading = true;

    await handleJumpToChat(`GROUP${groupId.value}`, true,false);
};

const vistorJoinLoading = ref(false);

const contactQuanzhu = async () => {
    // const currentView = pages[length - 1].$getAppWebview();
    // console.log('pagespagespagespagespagespagespagespagespagespages');
    // console.log(pages.length);
    if(groupDetail.value.userId === userData.id){
        uni.showToast({
            icon: "none",
            title: "您自己是群主",
            duration: 1500,
        });
        return;
    }



    if (jumpLoading) {
        return;
    }
    jumpLoading = true;
    await check(groupDetail.value.userId);

    if (isFriend.value) {
        await handleJumpToChat(`C2C${groupDetail.value.userId}`,false,false);
    } else {
        uni.navigateTo({
            url: `/pages/addFriend/applyforFriend?userId=${groupDetail.value.userId}&from=quanzhu`,
        });
    }

    jumpLoading = false;
};

let loading1 = false;

const goApplyforGroup = async () => {

    if (loading1) {
        return;
    }

    loading1 = true;

    const {joinOption} = groupDetail.value;

    if(joinOption === uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY){
        uni.showToast({
            icon: "none",
            title: "该群禁止任何人加入",
            duration: 1500,
        });
        loading1 = false;
        return;
    }


    const groupUserCountRes:any = await checkGroupUserCount({groupId:groupId.value});

    if(groupUserCountRes.flag!==1){
        uni.showToast({
            icon: "none",
            title: "检查群人数失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    const { havaCount, totalCount} = groupUserCountRes.data;

    if(havaCount>=totalCount){
        uni.showToast({
            icon: "none",
            title: "群已满员，请联系群主",
            duration: 1500,
        });
        loading1 = false;
        return;
    }


    const inGroupBlackList = await IsInGroupBlacklist();
    loading1 = false;
    if (inGroupBlackList) {
        vistorJoinLoading.value = false;
        uni.showToast({
            icon: "none",
            title: "你已被群主拉入黑名单",
            duration: 1500,
        });
        return;
    }


    if(groupDetail.value.payAmount){
        open();
        return;
    }

    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/applyforGroup?groupId=${groupDetail.value.groupId}&inviterId=${inviterId.value}&inviterName=${inviterName.value}`,
    });
};

const isFriend = ref(false);
const checked = ref(false);

const check = async (userId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            return check(userId);
        }, 200);
        return;
    }

    const res: any = await checkFriend([userId]);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "检查胖友关系失败~",
            duration: 1500,
        });
        return;
    }

    checked.value = true;

    if (
        data.successUserIDList[0].relation ===
            uni.$TIM.TYPES.SNS_TYPE_BOTH_WAY ||
        data.successUserIDList[0].relation === uni.$TIM.TYPES.SNS_TYPE_A_WITH_B
    ) {
        isFriend.value = true;
    } else {
        isFriend.value = false;
    }
};

const goUserDetail = () => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${groupDetail.value.userId}&type=quanzhu`,
    });
};
/*
const goPangyouDetail = (id) => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${id}`,
    });
};
*/
const goMembersDetail = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupMembers?groupID=${groupId.value}`,
    });
};
/*
const goHistory = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupHistory?groupID=${groupId.value}`,
    });
};

const handleVistorJoin = async () => {

    const {joinOption} = groupDetail.value;

    if(joinOption === uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY){
        uni.showToast({
            icon: "none",
            title: "该群禁止任何人加入",
            duration: 1500,
        });
        return;
    }
    
    if (vistorJoinLoading.value) {
        return;
    }

    showLoading();
    vistorJoinLoading.value = true;

    const inGroupBlackList = await IsInGroupBlacklist();

    if (inGroupBlackList) {
        closeLoading();
        vistorJoinLoading.value = false;
        uni.showToast({
            icon: "none",
            title: "你已被群主拉入黑名单",
            duration: 1500,
        });
        return;
    }

    const isJoined: boolean = await isGroupJoined(
        userData.id,
        groupId.value
    ).catch(() => {
        closeLoading();
    }) as boolean;
    if (isJoined) {
        closeLoading();
        // uni.showToast({
        //     icon: "none",
        //     title: "您已经在这个群~",
        //     duration: 1500,
        // });
        //vistorJoinLoading.value = false;
        handleJumpToChat(`GROUP${groupId.value}`, true,false);
        return;
    }

    const res: any = await vistorJoin({
        groupId: groupId.value,
        userId: userData.id,
    });

    //vistorJoinLoading.value = false;
    closeLoading();
    const { flag, message } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: message || "游客身份加入失败，请稍后再试~",
            duration: 1500,
        });
        vistorJoinLoading.value = false;
        return;
    }

    uni.showToast({
        icon: "none",
        title: "游客进入",
        duration: 1500,
    });

    GetGroupProfile();
    handleisGroupJoined();

    goQuanzi();


    // uni.navigateTo({
    //     url: "/pages/quanzi/quanzi",
    // });

    // uni.switchTab({
    //     url: "/pages/quanzi/quanzi",
    // });
};
*/
const isFav = ref(false);

const getFavStatu = async () => {
    const res: any = await groupIsFavorit({
        userId: userData.id,
        groupId: groupId.value,
    });
    const { flag, data } = res;
    if (flag !== 1) {
        return;
    }

    isFav.value = data.data;
};
const toggleFavLoading = ref(false);
/*
const toggleFav = async () => {
    if (toggleFavLoading.value) {
        return;
    }

    toggleFavLoading.value = true;
    if (isFav.value) {
        const res: any = await removeFav({
            userId: userData.id,
            groupId: groupId.value,
        });
        const { flag, data } = res;
        if (flag !== 1) {
            return;
        }

        setTimeout(() => {
            toggleFavLoading.value = false;
            isFav.value = false;
            uni.showToast({
                icon: "error",
                title: "取消收藏",
                duration: 1500,
            });
        }, 0);
    } else {
        const res: any = await addFav({
            userId: userData.id,
            groupId: groupId.value,
        });
        const { flag, data } = res;
        if (flag !== 1) {
            return;
        }
        setTimeout(() => {
            toggleFavLoading.value = false;
            isFav.value = true;
            uni.showToast({
                icon: "success",
                title: "已收藏",
                duration: 1500,
            });
        }, 0);
    }
};
*/
//////////////////////////////////////////支付/////////////////////////////////////////////////
const popup = ref();

const open = () => {
    // var EnvUtils = plus.android.importClass("com.alipay.sdk.app.EnvUtils");
    // EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
    popup.value.open("bottom");
    //fix.value = true;
};

const close = () => {
    popup.value.close();
    joinGroupLoading.value = false;

    //fix.value = false;
};
const maskClick = () => {
    joinGroupLoading.value = false;
    //fix.value = false;
};

let loaded = false;

onReady(() => {});

onShow(() => {
    jumpLoading = false;
    payLoading = false;
    vistorJoinLoading.value = false;

    if (groupId.value) {
        getDetail(groupId.value);
        GetGroupProfile();
        getFavStatu();
        handleisGroupJoined();
    }
});

const UpdateDate = () => {
    getDetail(groupId.value);
    GetGroupProfile();
    getFavStatu();
    handleisGroupJoined();
};
const inviterId = ref("")
const inviterName = ref("")
onLoad((option: any) => {
    if (option.groupId) {
        groupId.value = option.groupId;
    }
	if (option.inviterId) {
	    inviterId.value = option.inviterId;
	}
	if (option.inviterName) {
	    inviterName.value = option.inviterName;
	}
    uni.$on("groupJoined", UpdateDate);
});

onUnload(() => {
    closeChecking = true;
    uni.$off("groupJoined", UpdateDate);
});

// 投诉
const onLinkcomplaint = () => {
    uni.navigateTo({
        url: `/pages/complaint/complaint?groupId=${groupId.value}&groupName=${groupDetail.value.name}&target=group `,
    });
};
</script>

<style lang="scss" scoped>
.bottom-popup {
        background: #ffffff;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        .popup-title {
            height: 100rpx;
            border-bottom: 1rpx solid #e4e4e4;
            .title-text {
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
            .title-icon {
                right: 30rpx;
                width: 36rpx;
                height: 36rpx;
            }
        }
        .popup-row {
            padding: 20rpx 30rpx 0 30rpx;
            .content-selected {
                position: relative;
                border: 2rpx solid rgba(29, 198, 145, 0.5);
            }
            .row-content {
                position: relative;
                padding: 30rpx 30rpx 30rpx 30rpx;
                box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.06);
                border-radius: 10rpx;
                overflow: hidden;
                border:2rpx solid transparent;
                &.selected {
                    border: 2rpx solid rgba(29, 198, 145, 0.5);
                }

                .selected-icon {
                    position: absolute;
                    top: -2px;
                    left: 0;
                    width: 40rpx;
                    height: 40rpx;
                }

                .content-img {
                    width: 100rpx;
                    height: 100rpx;
                }
                .content-type {
                    flex: 1;
                    padding-left: 20rpx;
                    .type-name {
                        height: 50rpx;
                        .name-text {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;

                            font-size: 30rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                        }
                        .name-button {
                            margin-left: auto;
                            width: 80rpx;
                            height: 40rpx;
                            border-radius: 4rpx;
                            opacity: 0.99;
                            border: 1rpx solid #cccccc;

                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }
                    }
                    .type-describe {
                        padding-top: 12rpx;
                        height: 50rpx;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        .describe-amount {
                            color: #1dc691;
                        }
                    }
                }
            }
        }
        .popup-button {
            margin-top:30rpx;
            .button-button {
                border-radius: 20rpx;
                left:25rpx;
            }
            .heightBox{
                width:750rpx;
                min-height:20rpx;
                height: constant(safe-area-inset-bottom);
                height: env(safe-area-inset-bottom);
            }
        }
    }


.servicePopup {
    position: relative;
    width: 750rpx;
    min-height:700rpx;
    overflow: hidden;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    background: #fff;
    .heightBox{
        width:750rpx;
        min-height:20rpx;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
    }

    &.newService {
        .shadow {
            background: linear-gradient(
                27deg,
                #fce2d6 0%,
                #fff5e9 59%,
                #fddec0 100%
            );
        }

        .content {
            .title {
                .left_btn {
                    color: #f19945;
                }
                .close {
                }
            }
            .row1 {
                .index {
                    background: #f19945;
                }
            }

            .sbtn1 {
                background: linear-gradient(318deg, #ffaf67 0%, #e48e41 100%);
            }

            .sbtn2 {
                color: #f19945;
                border: 2rpx solid #ffaf67;
            }
        }
    }

    .shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        bottom:0;
        background: linear-gradient(
            27deg,
            #d6f6fc 0%,
            #eafce1 59%,
            #b2facd 100%
        );
    }
    .shadow1 {
        position: absolute;
        top: 155rpx;
        left: 0;
        width: 750rpx;
        bottom:0;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
    }
    .content {
        position: relative;
        z-index: 10;
        width: 750rpx;
        padding-top: 40rpx;
        .title {
            position: relative;
            width: 750rpx;
            height: 50rpx;
            padding: 0 40rpx;
            margin-bottom: 70rpx;
            .left_btn {
                font-size: 30rpx;
                font-weight: 400;
                color: #1dc691;
                left: 40rpx;
            }
            .close {
                right: 40rpx;
            }
            .text {
                font-size: 34rpx;
                font-weight: 600;
                color: #333333;
            }

            .img {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .row1 {
            width: 750rpx;
            padding: 0 50rpx;
            margin-bottom: 44rpx;
            .index {
                width: 48rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background: #1dc691;
                color: #fff;
                font-weight: 600;
                font-size: 28rpx;
                font-family: 'din',DINAlternate-Bold, DINAlternate;
            }
            .text {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 40rpx;
            }
        }

        .sbtn {
            width: 690rpx;
            height: 80rpx;
            margin: 0 auto;
            border-radius: 20rpx;
            font-size: 32rpx;
            font-weight: 600;
        }

        .sbtn1 {
            background: linear-gradient(318deg, #64f1c5 0%, #29dba3 100%);
            color: #fff;
            margin-bottom: 20rpx;
        }
        .sbtn2 {
            border: 2rpx solid #1dc691;
            color: #1dc691;
            margin-bottom: 20rpx;
        }
    }
}

.sheet {
    border-radius: 20rpx;
    overflow: hidden;
    padding: 0 40rpx;

    .dialog_box {
        width: 100%;
        background: linear-gradient(0, #ffffff 0%, #baf3da 100%, #cbf7e4 100%);
        color: #333333;
        padding: 30rpx 0;
        // border-top-left-radius: 20rpx;
        // border-top-right-radius: 20rpx;
        border-radius: 20rpx;

        .title {
            font-weight: 600;
            font-size: 32rpx;
            color: $slim-text3;
            text-align: center;
        }

        .desp {
            margin-top: 40rpx;
            padding: 0 30rpx;
            height: 440rpx;
            font-size: 28rpx;
        }

        .btns {
            margin-top: 20rpx;
            gap: 20rpx;

            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;
            }

            .btn1 {
                width: 460rpx;
                height: 80rpx;
                background: linear-gradient(120deg, #29dba3 0%, #64f1c5 100%);
                border-radius: 40rpx;
                color: #fff;
            }

            .btn2 {
                width: 460rpx;
                height: 80rpx;
                border-radius: 40rpx;
                border: 1px solid #cccccc;
                color: #999;
            }
        }
    }
}

.top_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 750rpx;
    overflow: hidden;
    .shadow {
        position: absolute;
        z-index: 10;
        width: 750rpx;
        height: 550rpx;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, #000000 0%, #3f544e 100%);
        opacity: 0.6;
    }
    .shadow1 {
        position: absolute;
        z-index: 11;
        width: 750rpx;
        height: 200rpx;
        top: 550rpx;
        left: 0;
        background: #f5f5f5;
        background: linear-gradient(
            180deg,
            rgba(63, 84, 78, 0.6),
            rgba(245, 245, 245, 1)
        );
    }
    .img {
        width: 750rpx;
        height: 740rpx;
    }
}

.title_main {
    padding: 0 30rpx;
    display: flex;
    height: 100rpx;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    z-index: 100;

    .title_name {
        font-size: 34rpx;
        font-weight: 500;
        color: #ffffff;
    }

    .back,
    .shere {
        width: 48rpx;
        height: 48rpx;
    }
    .aixin {
        font-size: 43rpx;
        color: #fff;
    }
}

.content1 {
    position: relative;
    width: 750rpx;
    z-index: 50;

    .title1 {
        width: 750rpx;
        height: 70rpx;
        padding: 0 48rpx;
        font-size: 50rpx;
        color: #fff;
        font-weight: 600;
        .icon {
            font-size: 30rpx;
            color: #ff6f57;
        }
    }
    .msg1 {
        width: 750rpx;
        padding: 0 30rpx 0 50rpx;
        margin-top: 20rpx;
        .pos {
            width: 40rpx;
            height: 40rpx;
        }

        .text {
            color: #fff;
            font-size: 24rpx;
        }
        .goHistory {
            font-size: 24rpx;
            color: #23e2a6;
            .img {
                width: 20rpx;
                height: 20rpx;
            }
        }
    }

    .box2 {
        position: relative;
        width: 710rpx;
        padding: 25rpx;
        background: #fff;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        .jiaobiao {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 160rpx;
            height: 40rpx;
            border-top-left-radius: 0;
            border-top-right-radius: 20rpx;
            border-bottom-left-radius: 20rpx;
            overflow: hidden;
            z-index: 5;

            &.shadow0 {
                background: #1dc691;
            }
            &.shadow1 {
                background: #ff9f26;
            }
            &.shadow2 {
                background: #905ade;
            }
            &.shadow3 {
                background: #4c7dfe;
            }
            &.shadow4 {
                background: #ad3569;
            }
            .icon {
                color: #fff;
                font-size: 20rpx;
                margin-right: 5rpx;
            }

            .text {
                z-index: 10;
                font-size: 20rpx;
                color: #fff;
            }
        }
        .title2 {
            height: 48rpx;
            font-size: 34rpx;
            font-weight: 600;
            color: #333333;
            .dot {
                width: 6rpx;
                height: 30rpx;
                background: #1dc691;
                border-radius: 3rpx;
                margin-right: 10rpx;
            }
        }

        .rich_box {
            margin-top: 20rpx;
            margin-bottom: 10rpx;
            font-size: 28rpx;
            min-height: 100rpx;
        }
        .service {
            width: 100%;
            padding-bottom: 20rpx;
            gap: 20rpx;

            .card {
                position: relative;
                width: 150rpx;
                &.checked {
                    .rect {
                        background: url("/static/createCircle/bg2.png")
                            no-repeat;
                        background-size: 100% 100%;

                        &.newService {
                            background: url("/static/createCircle/bg3.png")
                                no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }

                .rect {
                    width: 150rpx;
                    height: 150rpx;
                    border-radius: 10rpx;
                    background: rgba(35, 226, 166, 0.1);
                    &.newService {
                        background: rgba(226, 123, 35, 0.1);
                    }
                    &.add {
                        background: rgba(226, 123, 35, 0.1);
                    }

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .text {
                    width: 100%;
                    height: 35rpx;
                    margin-top: 5rpx;
                    font-size: 24rpx;
                    color: #666;
                    text-align: center;
                    height: 70rpx;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // white-space: nowrap;
                    // lines:2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    &.newServiceText {
                        height: 70rpx;
                    }
                }
            }
        }
    }

    .touxiang_img {
        padding: 0 30rpx 0 50rpx;
        margin-top: 31rpx;

        .right_jiantou {
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;

            .num {
                color: #2ac18f;
            }

            .shuangjian {
                width: 30rpx;
                height: 30rpx;
            }
        }

        .left_tou {
            padding-left: 20rpx;

            .shenlue {
                color: #fff;
                padding-left: 10rpx;
                margin-top: 10rpx;
            }

            .image_box {
                position: relative;
                border-radius: 50%;
                width: 88rpx;
                height: 88rpx;
                background: #fff;
                margin-left: -20rpx;
                box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
            }
            .image {
                border-radius: 50%;
                width: 79rpx;
                height: 79rpx;
            }
        }
    }

    .jubao {
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;

        .jubao-text {
            height: 40rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 40rpx;
            text-decoration: underline;
        }
    }

    .owner {
        width: 710rpx;
        height: 200rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-top: 40rpx;
        padding: 0 25rpx;
        .owner_head {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
        }
        .rightBox {
            width: 480rpx;
            height: 160rpx;
            margin-left: 20rpx;
            .title {
                .tag {
                    width: 80rpx;
                    height: 30rpx;
                    border-radius: 4rpx;
                    border: 2rpx solid #999;
                    font-size: 20rpx;
                    color: #999;
                    &.isRealName {
                        border: 2rpx solid #1dc691;
                        color: #1dc691;
                    }
                }
                .text {
                    font-size: 34rpx;
                    font-weight: bold;
                }
            }

            .msg_box {
                .box {
                    display: flex;
                    align-items: center;
                    width: 150rpx;
                }
                .sanjiao {
                    position: absolute;
                    color: #23e2a6;
                    right: -28rpx;
                }
                .dot {
                    font-size: 24rpx;
                    color: #666;
                    gap: 3rpx;
                    position: relative;
                    .num {
                        min-width: 48rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                        border-radius: 4rpx;
                        color: #fff;
                        font-size: 28rpx;
                        padding: 0 10rpx;
                    }
                    &.time {
                        .num {
                            background: linear-gradient(
                                125deg,
                                #c6bbff 0%,
                                rgba(139, 123, 255, 0.7) 100%
                            );
                        }
                    }
                    &.people {
                        .num {
                            background: linear-gradient(
                                96deg,
                                #97dfc8 0%,
                                #1dc691 100%
                            );
                        }
                    }
                    &.pj {
                        .num {
                            background: linear-gradient(
                                122deg,
                                #ffc99d 0%,
                                rgba(255, 144, 65, 0.7) 100%
                            );
                        }
                    }
                }
                .text {
                    color: #666;
                    font-size: 24rpx;
                    margin-top: 10rpx;
                }
            }
        }
    }
}

.bottomView {
    width: 750rpx;
    height: calc(constant(safe-area-inset-bottom) + 150rpx);
    height: calc(env(safe-area-inset-bottom) + 150rpx);
}

.detail-tar {
    width: 750rpx;
    background: #ffffff;
    position: fixed;
    bottom: -1rpx;
    left: 0;
    margin: 0;
    z-index: 100;
    box-sizing: border-box;
    padding-top: 30rpx;

    .heightBox {
        height: env(safe-area-inset-bottom);
        min-height: 20rpx;
    }

    .bar-lianxi {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:active {
            opacity: 0.7;
        }
        .lianxi {
            position: relative;
            top: 4rpx;
            width: 60rpx;
            height: 60rpx;
        }

        .tar-quan {
            font-size: 23rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: center;
            width: 110rpx;
            position: relative;
            top: -10rpx;
        }
    }

    .btn_main {
        border-radius: 50rpx;
    }

    .bar-btn {
        display: flex;
        width: 560rpx;
        height: 100rpx;
        align-items: center;
        margin-left: 0rpx;

        .btnGroup {
            width: 565rpx;
            .btn_l {
                width: 280rpx;
                height: 100rpx;
                background: #e9fcf6;
                border-radius: 10rpx 0rpx 0rpx 10rpx;
                font-size: 34rpx;
                color: #1dc691;
                &.needPay {
                    background: #ffe2c9;
                    color: #ff824f;
                }
            }
            .btn_r {
                width: 285rpx;
                height: 100rpx;
                background: linear-gradient(270deg, #4ee5c8 0%, #1fc994 100%);
                border-radius: 0rpx 10rpx 10rpx 0rpx;
                .text1 {
                    color: #fff;
                    font-size: 38rpx;
                    font-weight: 600;
                }
                .text2 {
                    color: #fff;
                    font-size: 24rpx;
                    font-weight: 600;
                }
                &.needPay {
                    background: linear-gradient(
                        270deg,
                        #ffa24a 0%,
                        #ff824f 100%
                    );
                }
            }
        }

        .btn {
            width: 280rpx;

            .youke {
                font-size: 34rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #1dc691;
            }

            .jiaru {
                display: flex;
                flex-direction: column;
                align-items: center;

                .jiaru-t {
                    height: 40rpx;

                    .lr {
                        font-size: 32rpx;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #ffffff;
                    }

                    .lt {
                        font-size: 20rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                    }
                }

                .jiaru-b {
                    font-size: 38rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                }
            }
        }
    }
}
.add-text1 {
	color: #fff;
	font-size: 38rpx;
	font-weight: 600;
}
.add-text2 {
	color: #fff;
	font-size: 38rpx;
	font-weight: 600;
}
</style>